<style lang="less">
    @import '../../../styles/common.less';
    @import '../../tables/components/table.less';
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col span="24" class="padding-left-10">
                <Card>
                    <Row slot="title" type="flex" justify="space-between" align="middle">
                        <H3>客户列表</H3>
                        <Button type="primary" @click="newCustomer">新增</Button>
                    </Row>
                    <!--<div class="edittable-table-height-con">-->
                    <can-edit-table refs="table3" v-model="listCustomer" :hover-show="true" :edit-incell="true"
                                    @on-cell-change="handleCellChange"
                                    @on-change="handleChange"
                                    :columns-list="columns"></can-edit-table>
                    <!--</div>-->
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    import canEditTable from '../../tables/components/canEditTable.vue';

    const colums = [
        {
            title: '序号',
            type: 'index',
            // width: 80,
            align: 'center'
        },
        {
            title: '名称',
            align: 'center',
            key: 'name',
            // width: 90,
            editable: true
        },
        {
            title: '地址',
            align: 'center',
            key: 'address',
            // width: 90,
            editable: true
        },
        {
            title: '电话',
            align: 'center',
            key: 'phone',
            // width: 90,
            editable: true
        },

        {
            title: 'email',
            align: 'center',
            key: 'email',
            // width: 90,
            editable: true
        },
        {
            title: 'skype',
            align: 'center',
            key: 'skype',
            // width: 90,
            editable: true
        },
        {
            title: '微信号',
            align: 'center',
            key: 'weixin',
            // width: 90,
            editable: true
        }, {
            title: 'QQ号',
            align: 'center',
            key: 'qq',
            // width: 90,
            editable: true
        }, {
            title: '注册资本',
            align: 'center',
            key: 'registerCapital',
            // width: 90,
            editable: true
        },
        {
            title: '操作',
            align: 'center',
            width: 200,
            key: 'handle',
            handle: ['edit', 'delete']
        }
    ]
    export default {
        name: 'customer-home',
        components: {
            canEditTable
        },
        data() {
            return {
                columns: colums,
                listCustomer: []
            };
        },
        methods: {
            newCustomer() {
                let customer = {}
                customer.isNew = true
                this.listCustomer.unshift(customer)

            },
            handleNetConnect(state) {
                this.breakConnect = state;
            },
            handleLowSpeed(state) {
                this.lowNetSpeed = state;
            },
            getCurrentData() {
                this.showCurrentTableData = true;
            },
            handleDel(val, index) {
                this.$Message.success('删除了第' + (index + 1) + '行数据');
            },
            handleCellChange(val, index, key) {
                debugger
                fetch(`http://localhost:8080/customer`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(val[index])
                }).then(r => r.json())
                    .then(json => {
                        this.$Message.success('修改了第 ' + (index + 1) + ' 行列名为 ' + key + ' 的数据');
                    })
                    .catch(ex =>
                        this.$Message.error('修改第 ' + (index + 1) + ' 行列名为 ' + key + ' 的数据失败，详情：' + ex))

            },
            handleChange(val, index) {
                fetch(`http://localhost:8080/customer`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(val[index])
                }).then(r => r.json())
                    .then(json => {
                        this.$Message.success('修改了第 ' + (index + 1) + ' 行的数据');
                    })
                    .catch(ex =>
                        this.$Message.error('修改第 ' + (index + 1) + ' 行的数据失败，详情：' + ex))
            }
        },
        created() {
            fetch(`http://localhost:8080/customer`)
                .then(response => response.json())
                .then(json => {
                    this.listCustomer = json
                })
        }
    };
</script>
